<!DOCTYPE html>
<html lang="en">

<head>
	<title>d3</title>
	<meta charset="utf-8" />
</head>

<style type="text/css">
svg
{
  background-color: yellow;
}


#myLittleCircle
{
  fill: blue;
  stroke: gray;
  stroke-width: 10;
}

</style>

<body>

<h1>D3 Example</h1>
<!-- see: http://blog.visual.ly/creating-animations-and-transitions-with-d3-js/ -->

<svg id="firstsvg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="300">
Your browser does not support SVG contents.
<circle id="myLittleCircle" cx="60" cy="70" r="30" fill="blue" />
</svg>
<br />
<input type="button" value="Move left" onclick="move(-1)" />
<input type="button" value="Move right" onclick="move(1)" />

<script src="d3.v3.min.js"></script>
<script>
var svg = d3.select("#firstsvg");

var mySquare=svg.append("rect")
  .attr("x",60)
  .attr("y",150)
  .attr("width",60)
  .attr("height",60);

var myCircle=d3.select("#myLittleCircle");
  
function move(direction)
{
  x = direction==1 ? 320 : 60;
  mySquare
    .transition()
    .duration(1000)
    .attr("x",x);
  myCircle
    .transition()
    .ease("elastic")
    .duration(1500)
    .attr("cx",x)
    .attr("r", x/2);
}

</script>

</body>
</html>
